<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="styles/bootstrap/css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="styles/main.css">
    <link type="text/css" rel="stylesheet" href="styles/jquery-ui-1.9.2.custom.css">
    <link rel="icon" href="favicon.ico">
    <title>BTC - Administraci&oacute;n</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js" ></script>
    <script type="text/javascript" src="styles/bootstrap/js/bootstrap.js" ></script>
    <script type="text/javascript" src="js/Highcharts-2.3.3/js/highcharts.js" ></script>
    <script type="text/javascript">
        $(function() {

            $.ajax({
                type: "post",
                cache: false,
                data: {palletId: currentPallet},
                dataType: "json",
                url: "<s:url namespace="/json" action="bloques" />",
                success: function(data) {
                    if (!data.error) {
                        armarTorta(data.bloques)
                    }
                    $("#total").html(data.total);

                },
                error: function() {

                }
            });

            function armarTorta(bloques) {
                var dataToPie = [];
                var i = 0;
                for (var clasificacion in bloques) {
                    dataToPie[i] = [clasificacion, bloques[clasificacion]];
                    i++;

                }
                // Build the chart
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'graph1',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'Composición del Pallet'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                        percentageDecimals: 1
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                formatter: function() {
                                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                                }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Cantidad en %',
                        data: dataToPie
                    }]
                });
            }


        });
    </script>
</head>
<body>
<b>Cantidad de bloques del pallet:</b><span id="total"></span>
<div id="graph1" style="width: 500px"></div>
</body>
</html>